<template>
    <div class="list-container">
        <el-form class="search-panel" v-model="formData" :inline="true">
            <el-form-item v-if="!companyId" label-width="120px" class="search-input" label="所属劳务公司：" prop="name" >
                <el-select style="width:100%" v-model="formData.serviceCorporationId" placeholder="请选择劳务公司">
                    <el-option v-for="item in corporationList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label-width="90px" class="search-input" label="班组名称：" prop="name" >
                <el-input v-model="formData.name" placeholder="班组名称"></el-input>
            </el-form-item>
            <!-- <el-form-item label-width="120px" class="search-time" label="最近结算时间：" prop="time">
                <el-date-picker
                style="width:250px"
                v-model="formData.startToEnd"
                type="daterange"
                range-separator="~"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                >
                </el-date-picker>
            </el-form-item> -->
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>
        <div class="table-panel">
            <el-row class="table-operate">
                <el-button type="primary" icon="el-icon-plus" @click="addTeam"> 新增班组 </el-button>
                <!-- <el-button @click="importTeam"> 导入 <i class="el-icon-upload2"/> </el-button> -->
            </el-row>
            <el-table
                ref="filterTable"
                :data="tableData"
                style="width: 100%"
                >
            <el-table-column
                prop="id"
                type="index"
                label="序号"
                width="60"
                align="center"
                >
            </el-table-column>
            <el-table-column
                v-if="!companyId"
                prop="serviceCorporationName"
                label="劳务公司名称"
                min-width="150px"
                align="center"
                >
            </el-table-column>
            <el-table-column
                prop="name"
                label="班组名称"
                min-width="90px"
                align="center"
                >
            </el-table-column>
            <el-table-column
                prop="teamLeaderName"
                label="班组长"
                align="center"
                >
            </el-table-column>
            <el-table-column
                prop="personNumber"
                label="人员总数量"
                align="center"
                min-width="100px"
                >
            </el-table-column>
            <el-table-column
                prop="updateTime"
                label="操作时间"
                align="center"
                min-width="130px"
                >
            </el-table-column>
            <el-table-column prop="operation" label="操作"
                align="center"
                min-width="250px"
                fixed="right"
                >
                <template slot-scope="scope">
                    <el-button @click="addPerson(scope.row)" type="text" icon="el-icon-circle-plus-outline">添加人员</el-button>
                    <el-button @click="setTeamLeader(scope.row)" type="text" icon="el-icon-setting">设置组长</el-button>
                    <el-button @click="updatePeople(scope.row)" type="text" icon="el-icon-edit">修改</el-button>
                    <el-button @click="deleteTeam(scope.row)" type="text" icon="el-icon-delete">删除</el-button>
                </template>
            </el-table-column>
            </el-table>
            <el-row class="page">
                <div class="page-tag">
                    共{{ Math.ceil(total / pageSize) }}页/{{ total }}条数据
                </div>
                <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage"
                    :page-sizes="[10, 20, 50]"
                    :page-size="pageSize"
                    layout="sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </el-row>
        </div>
    </div>
</template>

<script>
import team from'@/api/team.js'
import corp from'@/api/corp.js'

export default {  
    data(){
        return{
            formData:{
                serviceCorporationId:null,    //传的劳务公司        
                name:'',
                startToEnd:[]
            },
            corporationList:[],//所属劳务公司下拉框
            tableData:[],               //表格数据
            total:0,                  //数据总条数
            currentPage:1,             //当前页码
            pageSize:10,    //每页显示条目个数
            // corporationfilter:[],
            projectId:null,
            companyId:null      //劳务公司进来
        }
    },
    created(){
        var companyId=localStorage.getItem('companyId')
        if(companyId) {
            this.companyId=companyId
            this.formData.serviceCorporationId=companyId
        }
        if(localStorage.getItem('projectId')) this.projectId=localStorage.getItem('projectId')
        this.getList();
        this.getcorporationList()
    },
    methods:{
        getList(){
            var endTime=''
            var startTime=''
            if(this.formData.startToEnd.length!=0){
              var endTime = this.formData.startToEnd[1]
              var startTime = this.formData.startToEnd[0]
            }
            const data = {
                currentPage:this.currentPage,
                endTime:endTime,
                pageSize:this.pageSize,
                searchInput:this.formData.name,
                serviceCorporationId:this.formData.serviceCorporationId,
                startTime:startTime
            }
            team.list(data).then(res=>{
                console.log('list',res);
                this.total=res.data.data.total
                this.tableData=res.data.data.records
                console.log(this.tableData);
            })
        },
        // getcorporationfilter(){
        //     const data = {
        //         currentPage:null,
        //         endTime:null,
        //         id:this.projectId,
        //         pageSize:null,
        //         searchInput:null,
        //         startTime:null
        //     }
        //     corp.listByProjectId(data).then(res=>{
        //         console.log(res);
        //         var corporationfilter= this.corporationfilter;
        //         res.data.data.records.forEach(function(item){
        //             corporationfilter.push({text:item.name,value:item.name})
        //         })
        //         this.corporationfilter=corporationfilter
        //     })
        // },
        getcorporationList(){
            const data = {
                currentPage:null,
                endTime:null,
                pageSize:null,
                searchInput:null,
                startTime:null
            }
            corp.listByProjectId(data).then(res=>{
                var corporationList= this.corporationList;
                res.data.data.records.forEach(function(item){
                    corporationList.push({value:item.serviceCorporationId,label:item.name})
                })
                this.corporationList=corporationList
            })
        },
        importTeam(){
            this.$router.push({path:'/team/import'})
        },
        addTeam(){
            this.$router.push({path:'/team/add'})
        },

        filterHandler(value, row, column) {
            const property = column['property'];
            return row[property] === value;
        },
        addPerson(row){
            this.$router.push({path:'/worker/add',query:{corpId:row.serviceCorporationId,teamId:row.id}})
        },
        deleteTeam(row){
            this.$confirm(
                "确定要删除当前信息？",
                "删除确认",
                {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                // type: "none",
                }
            ).then(() => {
                console.log(row);
                team.deleteTeam(row.id)
                    .then(res=>{
                        console.log(res);
                        this.$message({
                        type: "success",
                        message: "已删除!",
                        });
                        this.getList();
                    }).catch(error=>{
                        console.log(error);
                    })
            }).catch(()=>{
                this.$message({
                    type:'info',
                    message:'已取消删除'
                })
            })
        },
        updatePeople(row){
            console.log(row);
            this.$router.push({path:'/team/edit/'+row.id})
        },
        setTeamLeader(row){
            this.$router.push({path:'/team/setTeamLeader',query:{teamId:row.id,teamName:row.name,corpId:row.serviceCorporationId,corpName:row.serviceCorporationName}})
        },
        onSubmit(){
            this.getList()
        },
        //分页
        //pageSize每页条数改变时
        handleSizeChange(val){
            this.pageSize=val
            this.getList()       
        },
        //currentPage当前页改变时
        handleCurrentChange(val) {
            this.currentPage=val
            this.getList()      
        }
    }
}
</script>

<style scoped lang="scss">
</style>